<template>
	<view class="container">
		<!-- 背景渐变层 -->
		<view class="background">
			<view class="header">
				<view class="main-title"></view>
				<view class="sub-title"></view>
			</view>
		</view>

		<!-- 登录卡片 -->
		<view class="login-card">

			<view class="header">
				<text class="main-title">请选择使用端口</text>
			</view>

			<!-- 登录表单 -->
			<view class="form">

				<!-- 登录按钮 -->
				<button class="btn family-btn" @click="selectPort('family')" style="background: #7EBBF9;">
					<img src="https://www.ruanzi.net/jy/wxuser/103/images/pages/子女端.png" alt="微信图标" class="icon" />
					<text class="btn-text">子女端</text>
				</button>
				<!-- 老人端按钮 -->
				<button class="btn elder-btn" @click="selectPort('elder')" style="background:#FFB45D ; ">
					<img src="https://www.ruanzi.net/jy/wxuser/103/images/pages/老人端.png" alt="微信图标" class="icon" />
					<text class="btn-text">老人端</text>
				</button>

			</view>

			<!-- 帮助按钮 -->
			<button class="help-btn" @click="showHelp">
				<img src="https://www.ruanzi.net/jy/wxuser/103/images/pages/帮助.png" alt="帮助" class="icon" />
				<text class="help-text">帮助</text>
			</button>

		</view>
	</view>
</template>

<script setup>
	const selectPort = (type) => {
		uni.showLoading({
			title: '加载中...'
		});
		setTimeout(() => {
			uni.hideLoading();
			uni.navigateTo({
				url: type === 'family' ? '/pages/family/index' : '/pages/elder/index'
			});
		}, 500);
	};

	const showHelp = () => {
		uni.showModal({
			title: '帮助说明',
			content: '根据您的身份选择对应端口\n子女端：亲属监护功能\n老人端：长者服务功能',
			confirmText: '知道了'
		});
	};
</script>

<style lang="scss">
	.container {
		height: 100vh;
		position: relative;
		background-color: #D9E7F7;

		.background {
			.header {
				.main-title {
					display: block;
					font-size: 48rpx;
					color: #004572;
					font-weight: bold;
					margin-bottom: 20rpx;
					padding-top: 50px;
				}

				.sub-title {
					font-size: 28rpx;
					color: #004572;
				}
			}

		}

		.login-card {
			position: relative;
			width: 85%;
			height: 80%;
			margin: 20rpx auto 0;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 60rpx 40rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);

			.header {
				text-align: center;

				.main-title {
					color: #000;
					font-size: 16px;
					text-align: center;
					font-weight: bold;
				}
			}

			.form {
				margin-top: 60rpx;

				.btn {
					width: 500rpx;
					height: 240rpx;
					border-radius: 32rpx;
					display: inline-block;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border: none;
					box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.3);
					margin: 40px 0px 0px 40px;

					&::after {
						border: none
					}

					.btn-text {
						color: #000;
						font-size: 80rpx;
						margin-top: 20rpx;
						font-weight: bold;
					}

					.icon {
						margin-right: 20px;
						width: 40px;
						height: 40px;
					}


				}
			}

			.help-btn {
				position: fixed;
				right: 40rpx;
				bottom: 60rpx;
				display: inline-flex;
				align-items: center;
				background-color: #FFFFFF;

				::after {
					border: none;
				}

				.help-text {
					color: #A5A5A8;
					font-size: 28rpx;
					margin-left: 8rpx;
				}

				.icon {
					color: #A5A5A8;
					width: 20px;
					height: 20px;
				}
			}

		}
	}
</style>